<template>
	<div>
		<!-- 个人信息 -->
		<div class="userInfo" v-if="!getNickName()">
			<!-- 查询最近的一个未出行订单进行显示 -->
			<!-- TODO 行程的信息待定 我的行程只显示一个 按照单程或者往返进行显示 显示的内容来自我后端的数据 -->
			<!-- 去程 - 起始城市、抵达城市 -->
			<!-- 去程 - 起始时间、抵达时间 -->
			<!-- 返程 - 起始城市、抵达城市 -->
			<!-- 返程 - 起始时间、抵达时间 -->
			<!-- 开票航司 -->
			<el-divider><i class="el-icon-s-promotion"> 我的行程</i></el-divider>
			<div v-if="tripInfo.length == 0">暂无行程</div>
			<!-- 可能有多个，进行for循环 -->
			<div v-if="tripInfo.length !== 0">
				<div v-for="(item,index) in tripInfo" :key="index">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-divider content-position="left"><i> 行程信息</i></el-divider>
							<p style="text-align: left;">
								{{item.startCity}}({{item.startCityCode}}) ->
								{{item.arriveCity}}({{item.arriveCityCode}})
							</p>
							<p style="text-align: left;">起飞时间：{{item.startDate}} 抵达时间: {{item.arriveDate}}</p>
						</el-col>
					</el-row>
				</div>
			</div>
			<el-divider><i class="el-icon-date"> 个人信息</i></el-divider>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="基本信息" name="first">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form :label-position="labelPosition" label-width="80px">
								<el-form-item label="昵称">
									<el-input :disabled="isBaseUserInfoUpdate" v-model="userInfo.nickName"></el-input>
								</el-form-item>
								<el-form-item label="手机号">
									<el-input :disabled="true" v-model="userInfo.phoneNumber"></el-input>
								</el-form-item>
							</el-form>
						</el-col>
						<el-col :span="2">
							<el-form :label-position="labelPosition" label-width="80px">
								<el-form-item>
									<el-button type="primary" icon="el-icon-edit"
										@click="isBaseUserInfoUpdate = !isBaseUserInfoUpdate">修改
									</el-button>
								</el-form-item>
								<el-form-item>
									<el-button v-if="!isBaseUserInfoUpdate" type="success" icon="el-icon-thumb"
										@click="updateNickName">更新
									</el-button>
								</el-form-item>
							</el-form>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="身份信息" name="second">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form :label-position="labelPosition" label-width="80px">
								<el-form-item label="姓名">
									<el-input :disabled="isIdCardUpdate" v-model="userInfo.reallyName"></el-input>
								</el-form-item>
								<el-form-item label="身份证">
									<el-input :disabled="isIdCardUpdate" v-model="userInfo.idCardNumber"></el-input>
								</el-form-item>
							</el-form>
						</el-col>
						<el-col :span="2">
							<el-form :label-position="labelPosition" label-width="80px">
								<el-form-item>
									<el-button type="primary" icon="el-icon-edit"
										@click="isIdCardUpdate = !isIdCardUpdate">修改
									</el-button>
								</el-form-item>
								<el-form-item>
									<el-button v-if="!isIdCardUpdate" type="success" icon="el-icon-thumb"
										@click="updateIdCard">更新</el-button>
								</el-form-item>
							</el-form>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="邮件信息" name="third">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form :label-position="labelPosition" label-width="80px">
								<el-form-item label="邮箱">
									<el-input :disabled="isEmailUpdate" v-model="userInfo.emailAddress"></el-input>
								</el-form-item>
								<el-form-item v-if="!isEmailUpdate" label="验证码">
									<el-input :disabled="isEmailUpdate" v-model="userInfo.emailSendCode"></el-input>
								</el-form-item>
							</el-form>
						</el-col>
						<el-col :span="4">
							<el-form :label-position="labelPosition" label-width="80px">
								<el-form-item>
									<!-- 点击修改之后，进行发送验证码 更新之后进行处理 -->
									<el-button v-if="isEmailUpdate" type="primary" icon="el-icon-edit"
										@click="isEmailUpdate = !isEmailUpdate">修改
									</el-button>
									<el-button :disabled="edit" v-if="!isEmailUpdate" type="primary" icon="el-icon-edit"
										@click="sendEmailCode">发送验证码
									</el-button>
								</el-form-item>
								<el-form-item>
									<el-button v-if="!isEmailUpdate" type="success" icon="el-icon-thumb"
										@click="updateEmailAddress">更新</el-button>
								</el-form-item>
							</el-form>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
			<el-divider><i class="el-icon-date"> 优惠券们</i></el-divider>
			<el-card style="margin-top: 30px;" shadow="always">
				<el-table :data="userCouponAllTableDataPage" height="450" border style="width: 100%"
					:default-sort="{prop: 'createTime', order: 'descending'}">
					<el-table-column fixed prop="couponNumber" sortable label="券编号" width="280">
					</el-table-column>
					<el-table-column prop="createTime" sortable label="获取时间" width="180">
					</el-table-column>
					<el-table-column prop="status" label="券状态" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 1">在线</span>
							<span v-if="scope.row.status == 0">下架</span>
							<span v-if="scope.row.status == 2">我未使用</span>
							<span v-if="scope.row.status == 3">我已使用</span>
						</template>
					</el-table-column>
					<el-table-column prop="startCity" label="起飞城市" width="80">
					</el-table-column>
					<el-table-column prop="endCity" label="抵达城市" width="80">
					</el-table-column>
					<el-table-column prop="fullMoney" sortable label="满" width="80">
					</el-table-column>
					<el-table-column prop="reduceMoney" sortable label="减" width="80">
					</el-table-column>
					<el-table-column prop="des" label="抵用券描述" width="180">
					</el-table-column>
					<el-table-column prop="couponType" label="抵用券类型" width="180">
						<template slot-scope="scope">
							<span v-if="scope.row.couponType == 1">单程</span>
							<span v-if="scope.row.couponType == 2">往返</span>
						</template>
					</el-table-column>
					<el-table-column prop="effectiveStartTime" sortable label="有效开始时间" width="180">
					</el-table-column>
					<el-table-column prop="effectiveEndTime" sortable label="有效结束时间" width="180">
					</el-table-column>
				</el-table>
				<el-pagination style="margin-top: 20px; text-align: right;" background layout="sizes,prev, pager, next"
					:total="userCouponAllTableData.length" @size-change="sizeChangePage" :hide-on-single-page="true"
					@prev-click="prevClickPage" @next-click="nextClickPage" @current-change="currentChangePage">
				</el-pagination>
			</el-card>
			<el-divider><i class="el-icon-finished"> 我的订单</i></el-divider>
			<el-card style="margin-top: 30px;" shadow="always">
				<el-table :data="orderInfoPage" height="450" border style="width: 100%"
					:default-sort="{prop: 'startDate', order: 'descending'}">
					<el-table-column fixed prop="flightNumber" label="航班号" width="200">
					</el-table-column>
					<el-table-column fixed prop="orderSerialNo" label="订单流水号" width="200">
					</el-table-column>
					<el-table-column prop="startCity" label="起飞城市" width="180">
					</el-table-column>
					<el-table-column prop="arriveCity" label="抵达城市" width="180">
					</el-table-column>
					<el-table-column prop="startDate" sortable label="起飞时间" width="180">
					</el-table-column>
					<el-table-column prop="arriveDate" sortable label="抵达时间" width="180">
					</el-table-column>
					<el-table-column prop="gds" label="航空公司" width="180">
					</el-table-column>
					<el-table-column prop="createTime" sortable label="创建时间" width="180">
					</el-table-column>
					<el-table-column prop="updateTime" sortable label="更新时间" width="180">
					</el-table-column>
					<el-table-column prop="price" sortable label="机票价格" width="180">
					</el-table-column>
					<el-table-column prop="ticketLevel" label="机票舱等" width="180">
						<template slot-scope="scope">
							<span v-if="scope.row.ticketLevel == 0">商务舱</span>
							<span v-if="scope.row.ticketLevel == 1">一等舱</span>
							<span v-if="scope.row.ticketLevel == 2">二等舱</span>
							<span v-if="scope.row.ticketLevel == 3">三等舱</span>
							<span v-if="scope.row.ticketLevel == 4">四等舱</span>
						</template>
					</el-table-column>
					<el-table-column prop="seatNumber" label="座位类型" width="180">
					</el-table-column>
					<el-table-column prop="aircraftNumber" label="客机类型" width="180">
						<template slot-scope="scope">
							<span v-if="scope.row.aircraftNumber == 0">大型客机</span>
							<span v-if="scope.row.aircraftNumber == 1">中型客机</span>
							<span v-if="scope.row.aircraftNumber == 2">小型客机</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="80">
						<template slot-scope="scope">
							<!-- // 判断是否购买-->
							<span v-if="scope.row.orderStatus == 0">
								<el-button type="text" size="mini">已取消</el-button>
							</span>
							<span v-if="scope.row.orderStatus == 1">
								<el-button type="primary" size="mini" @click="payIt(scope.row)">待支付</el-button>
							</span>
							<span v-if="scope.row.orderStatus == 3">
								<el-button type="text" size="mini">已支付</el-button>
							</span>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination style="margin-top: 20px; text-align: right;" background layout="sizes,prev, pager, next"
					:total="orderInfos.length" @size-change="sizeChange" :hide-on-single-page="true"
					@prev-click="prevClick" @next-click="nextClick" @current-change="currentChange">
				</el-pagination>
			</el-card>
		</div>
		<div style="margin-top: 10%; margin-bottom: 30%;" v-if="getNickName()">
			您还没登录，请先登录~
		</div>
		<el-dialog title="付款" :visible.sync="dialogFormVisible">
			<div style="text-align: center;margin-bottom: 20px;">
				<p>尊敬的
					{{orderInfo.reallyName}}({{orderInfo.nickName}}),您购买的行程信息为：{{orderInfo.startCity}}({{orderInfo.startCityCode}})
					-> {{orderInfo.arriveCity}}({{orderInfo.arriveCityCode}})
				</p>
				<p>起飞时间：{{orderInfo.startDate}} 抵达时间: {{orderInfo.arriveDate}}</p>
				<p>
					<span v-if="orderInfo.couponNumber !== ''">
						您需要付款 {{orderInfo.price - orderInfo.reduceMoney}} 元,其中优惠券抵扣 {{orderInfo.reduceMoney}} 元
					</span>
					<span v-if="orderInfo.couponNumber == ''">
						您需要付款 {{orderInfo.price}} 元
					</span>
				</p>
				<p>请在15分钟之内完成付款, {{orderInfo.gds}} 航空公司祝您旅途愉快</p>
			</div>
			<img style="width: 200px;height: 250px;" src="../../assets/pay/pay.png" alt="">
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="dialogFormVisible = !dialogFormVisible">取 消</el-button>
				<el-button size="small" type="primary" @click="buyIt">支付完成</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "UserInfo",
		components: {},
		data() {
			return {
				edit: false,
				activeName: "first",
				isBaseUserInfoUpdate: true,
				isIdCardUpdate: true,
				isEmailUpdate: true,
				labelPosition: 'right',
				userInfo: {
					nickName: '',
					phoneNumber: '',
					reallyName: '',
					idCardNumber: '',
					emailAddress: '',
					emailSendCode: ''
				},
				// 后端拼接好进行传递结果
				userCouponAllTableData: [],
				userCouponAllTableDataPage: [],
				tripInfo: [],
				orderInfos: [],
				orderInfoPage: [],
				pageSize: 10,
				pageSizeCoupon: 10,
				orderInfo: {},
				dialogFormVisible: false
			}
		},
		created() {

		},
		mounted() {
			this.searchOrderData()
			this.searchBaseData()
			this.initCouponData()
		},
		methods: {
			payIt(row) {
				let vm = this
				vm.targetRow = row
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/order-service/order/queryOneRowByUserPhone/' + row.orderId,
				}).then(function(res) {
					if (res.data.success) {
						vm.dialogFormVisible = true
						vm.$message.success(res.data.message);
						vm.orderInfo = res.data.data.orderInfo
					} else {
						vm.$message.warning(res.data.message);
					}
				})
			},
			buyIt() {
				let vm = this
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/order-service/order/bookPay/' + vm.orderInfo.orderId,
				}).then(function(res) {
					if (res.data.success) {
						vm.dialogFormVisible = false
						vm.$message.success(res.data.message);
						vm.searchOrderData();
						vm.initCouponData();
					} else {
						vm.$message.warning(res.data.message);
					}
				})
			},
			// 前端分页
			prevClick(e) {
				this.orderInfoPage = this.orderInfos.slice((e - 1) * this.pageSize, e * this
					.pageSize)
			},
			nextClick(e) {
				this.orderInfoPage = this.orderInfos.slice((e - 1) * this.pageSize, e * this
					.pageSize)
			},
			currentChange(e) {
				this.orderInfoPage = this.orderInfos.slice((e - 1) * this.pageSize, e * this
					.pageSize)
			},
			sizeChange(e) {
				this.pageSize = e
				this.orderInfoPage = this.orderInfos.slice(0, this
					.pageSize)
			},
			// 前端分页
			prevClickPage(e) {
				this.userCouponAllTableDataPage = this.userCouponAllTableData.slice((e - 1) * this.pageSizeCoupon, e * this
					.pageSizeCoupon)
			},
			nextClickPage(e) {
				this.userCouponAllTableDataPage = this.userCouponAllTableData.slice((e - 1) * this.pageSizeCoupon, e * this
					.pageSizeCoupon)
			},
			currentChangePage(e) {
				this.userCouponAllTableDataPage = this.userCouponAllTableData.slice((e - 1) * this.pageSizeCoupon, e * this
					.pageSizeCoupon)
			},
			sizeChangePage(e) {
				this.pageSizeCoupon = e
				this.userCouponAllTableDataPage = this.userCouponAllTableData.slice(0, this
					.pageSizeCoupon)
			},
			searchOrderData() {
				let vm = this
				let phoneNumber = vm.$cookie.get('phoneNumber')
				if (typeof(phoneNumber) == "undefined" || phoneNumber == null) {
					vm.$message.warning("请先登录~")
					return
				}
				vm.orderInfoPage = []
				vm.tripInfo = []
				vm.orderInfos = []
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/order-service/order/queryManyRowByUserPhone/' + phoneNumber,
				}).then(function(res) {
					if (res.data.success) {
						vm.$message.success(res.data.message);
						vm.orderInfos = res.data.data.orderInfos
						vm.orderInfoPage = vm.orderInfos.slice(0, vm
							.pageSize)
						vm.tripInfo = vm.orderInfos.filter((val) => {
							return val.orderStatus == 3 && new Date(val.arriveDate).getTime() > new Date()
								.getTime()
						})
					} else {
						vm.$message.warning(res.data.message);
					}
				})
			},
			searchBaseData() {
				let vm = this
				if (!vm.$cookie.get("phoneNumber")) {
					return
				}
				let searchForm = {
					phoneNumber: vm.$cookie.get("phoneNumber")
				}
				// getBaseData
				axios({
					method: 'post',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					url: vm.$dev.BASE_URL + '/user-info-service/userInfo/getBaseData',
					data: searchForm,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
					} else {
						vm.$message.success(res.data.message);
						vm.userInfo.nickName = res.data.data.userInfo.nickName;
						vm.userInfo.phoneNumber = res.data.data.userInfo.phoneNumber;
						vm.userInfo.reallyName = res.data.data.userInfo.reallyName == null ? '' : res.data.data
							.userInfo
							.reallyName;
						vm.userInfo.idCardNumber = res.data.data.userInfo.idCardNumber == null ? '' : res.data.data
							.userInfo
							.idCardNumber;
						vm.userInfo.emailAddress = res.data.data.userInfo.emailAddress == null ? '' : res.data.data
							.userInfo
							.emailAddress;
						vm.$cookie.set('nickName', res.data.data.userInfo.nickName, 7);
						vm.$cookie.set('phoneNumber', res.data.data.userInfo.phoneNumber, 7);
					}
				});
			},
			initCouponData() {
				let vm = this
				let userId = vm.$cookie.get('id');
				if (typeof(userId) == "undefined" || userId == null) {
					vm.$message.success("请先登录~")
					return
				}
				vm.userCouponAllTableData = []
				vm.userCouponAllTableDataPage = []
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/coupon-service/coupon/queryUserCoupons/' + userId,
				}).then(function(res) {
					if (res.data.success) {
						vm.$message.success(res.data.message)
						vm.userCouponAllTableData = res.data.data.couponList
						vm.userCouponAllTableDataPage = vm.userCouponAllTableData.slice(0, vm
							.pageSizeCoupon)
					} else {
						vm.$message.warning(res.data.message)
					}
				})
			},
			handleClick() {},
			getNickName() {
				let vm = this
				let nickName = vm.$cookie.get('nickName');
				if (typeof(nickName) == "undefined" || nickName == null) {
					return true
				} else {
					vm.nickName = nickName
					return false
				}
			},
			updateNickName() {
				let vm = this
				if (vm.userInfo.nickName.trim() == '') {
					vm.$message.error('昵称不能为空');
					return;
				}
				let updateForm = {
					nickName: vm.userInfo.nickName,
					phoneNumber: vm.$cookie.get('phoneNumber')
				}
				axios({
					method: 'post',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					url: vm.$dev.BASE_URL + '/user-info-service/userInfo/update',
					data: updateForm,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
					} else {
						vm.$message.success(res.data.message);
						// 把用户信息放到 cookie 中去
						console.log(res.data.data)
						vm.$cookie.set('nickName', res.data.data.userInfo.nickName, 7);
						vm.$cookie.set('phoneNumber', res.data.data.userInfo.phoneNumber, 7);
						// 跳转到首页
						vm.$router.push('/Index')
					}
				});
			},
			updateIdCard() {
				let vm = this
				if (vm.userInfo.reallyName.trim() == '') {
					vm.$message.error('姓名不能为空');
					return;
				}
				let patternIdCard =
					/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				let isPass = patternIdCard.test(vm.userInfo.idCardNumber)
				if (!isPass) {
					vm.$message.error('请输入正确的身份证号码');
					return;
				}
				let updateForm = {
					reallyName: vm.userInfo.reallyName,
					idCardNumber: vm.userInfo.idCardNumber,
					phoneNumber: vm.$cookie.get('phoneNumber')
				}
				axios({
					method: 'post',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					url: vm.$dev.BASE_URL + '/user-info-service/userInfo/update',
					data: updateForm,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
					} else {
						vm.$message.success(res.data.message);
						// 把用户信息放到 cookie 中去
						console.log(res.data.data)
						vm.$cookie.set('nickName', res.data.data.userInfo.nickName, 7);
						vm.$cookie.set('phoneNumber', res.data.data.userInfo.phoneNumber, 7);
						// 跳转到首页
						vm.$router.push('/Index')
					}
				});
			},
			updateEmailAddress() {
				let vm = this
				// 验证邮箱
				let patternEmail = /^([\\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
				let isPass = patternEmail.test(vm.userInfo.emailAddress)
				if (!isPass) {
					vm.$message.error("请输入正确的邮箱");
					return
				}
				if (vm.userInfo.emailSendCode.trim() == '' || vm.userInfo.emailSendCode.length !== 6) {
					vm.$message.error("验证码格式不正确");
					return
				}
				let updateForm = {
					emailAddress: vm.userInfo.emailAddress,
					phoneNumber: vm.$cookie.get('phoneNumber'),
					code: vm.userInfo.emailSendCode
				}
				// updateEmail
				axios({
					method: 'post',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					url: vm.$dev.BASE_URL + '/user-info-service/userInfo/updateEmail',
					data: updateForm,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
					} else {
						vm.$message.success(res.data.message);
						// 把用户信息放到 cookie 中去
						console.log(res.data.data)
						vm.$cookie.set('nickName', res.data.data.userInfo.nickName, 7);
						vm.$cookie.set('phoneNumber', res.data.data.userInfo.phoneNumber, 7);
						// 跳转到首页
						vm.$router.push('/Index')
					}
				});
			},
			sendEmailCode() {
				let vm = this
				if (vm.userInfo.emailAddress.trim() == '') {
					vm.$message.error("邮箱不能为空");
					return
				}
				let patternEmail = /^([\\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
				let isPass = patternEmail.test(vm.userInfo.emailAddress)
				if (!isPass) {
					vm.$message.error("请输入正确的邮箱");
					return
				}
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/message-service/message/getEmailCode/' + vm.userInfo.emailAddress,
				}).then(function(res) {
					if (!res.data.success) {
						vm.$message.error(res.data.message);
						vm.edit = true
					} else {
						vm.$message.success(res.data.message);
					}
				});
			}
		}
	}
</script>

<style>
	.userInfo {
		/* text-align: center; */
		width: 80%;
		margin-left: 10%;
		margin-top: 5%;
		/* margin-bottom: 40%; */
	}

	.el-tabs--left .el-tabs__active-bar.is-left {
		/* background-color: #808080; */
		width: 0px;
	}

	.el-tabs--left .el-tabs__nav-wrap.is-left::after {
		width: 0px;
	}

	.el-tabs__nav-wrap::after {
		height: 0px;
	}
</style>
